<template>
  <div class="tcm-prescription-box">
    <div class="acupuncture-title-bar">
      <div class="acupuncture-title">
        <span style="margin-left:0">{{ info.extInfo.projectName }}</span>
        <span>{{ info.extInfo.frequencyCodeText }}</span>
        <span>{{ info.extInfo.remark }}</span>
      </div>
      <div class="acupuncture-title-right">
        <span class="acupuncture-title-count" v-if="info.extInfo.execStatus != '3'" :style="info.extInfo.execStatus != '3'?'':'margin-right:0'"
          >第{{ info.extInfo.nextTimes }}
         次 /共{{ info.extInfo.totalTimes
          }}次
        </span>
        <span class="acupuncture-title-count" v-else style="margin-right:0"
          >共{{ info.extInfo.totalTimes
          }}次
        </span>
        <span class="acupuncture-title-divider" v-if="info.extInfo.execStatus != '3'"></span>
        <span class="acupuncture-title-action"  v-if="info.extInfo.execStatus != '3'" @click="showExecDialogFunc()">
          <span class="acupuncture-title-action-text" v-btnPermission="'execute-addExecRecord'">执行</span>
        </span>
      </div>
    </div>
    <div class="tcm-divider"></div>
    <div class="tcm-herb-list">
      <div v-for="(herb, idx) in info.extInfo.detailList" :key="idx">
        <div class="tcm-herb-item">
          <div class="herb-name tcm-herb-item_1"> {{ sideTypeEnumText(herb.sideType)  }}</div>
          <div class="tcm-herb-item_2">
            <span class="herb-amount">{{ herb.acupointName }}</span>
          </div>
        </div>
      </div>
    </div>
    <CommonDialog
      v-model:visible="showExecDialog"
      :title="'执行'"
      :width="480"
      @close="showExecDialog = false"
      @confirm="handleExecConfirm"
    >
      <template #body>
        <div style="margin-bottom: 12px; color: #666; font-size: 15px">
          本次为第 {{ info.extInfo.nextTimes }}
          次执行，剩余 {{ info.extInfo.totalTimes - info.extInfo.nextTimes
          }}次。
        </div>
        <el-input
          v-model="execResult"
          type="textarea"
          :rows="3"
          placeholder="执行效果"
          style="width: 100%; margin-bottom: 12px"
        />
        <div style="color: #888; font-size: 14px; margin-top: 0">
          执行人：张三　执行时间：2025-05-05 12:12:12
        </div>
      </template>
      <template #footer>
        <el-button type="primary" style="width: 88px" @click="handleExecConfirm"
          >确认</el-button
        >
      </template>
    </CommonDialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import stores from '@/store';
import {addExecRecord} from '@/api/exec';
import CommonDialog from './CommonDialog.vue';
const props = defineProps<{
  info: any;
  orderId:any;
  execStatus:any
}>();

const sideTypeEnum = ref<any>(
  stores.useBaseDataStore().getEnumSelect('acupointSideTypeEnum')
);
const today = new Date()
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
const hours = String(today.getHours()).padStart(2, '0');
const minutes = String(today.getMinutes()).padStart(2, '0');
const seconds = String(today.getSeconds()).padStart(2, '0');

const userInfo = ref<any>( )
const showExecDialogFunc = () => {
  userInfo.value = {
    userName: getUserInfo().empName,
    time: `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`,
  } 
  execResult.value = '';
  showExecDialog.value = true;
};
const sideTypeEnumText = (val: any) => {
  for (let index = 0; index < sideTypeEnum.value.length; index++) {
    let item = sideTypeEnum.value[index];
    if (val == item.value) {
      return item.text;
    }
  }
};
const execResult = ref('');

const info = props.info;

const showExecDialog = ref(false);

const handleExecConfirm = async () => {
  let data = {
    orderId: props.orderId,
    execResult: execResult.value,
  }
  let res = await addExecRecord(data);
  if(res.code == '200'){
    ElMessage({
      type: 'success',
      message: res.msg,
      duration: 2000,
    })
    closeDrawer()

    showExecDialog.value = false;
    execResult.value = '';

  }else{
    // ElMessage({
    //   type: 'error',
    //   message: res.msg,
    //   duration: 2000,
    // })
  }

};
const emit = defineEmits(['closeDrawer']);
const closeDrawer = () => {
  emit('closeDrawer');
};

</script>

<style scoped>
.tcm-prescription-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 #e9e9e9;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.acupuncture-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f8f8;
  height: 48px;
  border-radius: 12px 12px 0 0;
  padding: 0 24px;
}
.acupuncture-title {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  > span{
    margin-left: 20px;
  }
}
.acupuncture-title-right {
  display: flex;
  align-items: center;
}
.acupuncture-title-info {
  color: #666;
  font-size: 14px;
  margin-right: 16px;
}
.acupuncture-title-count {
  color: #222;
  font-size: 14px;
  margin-right: 16px;
}
.acupuncture-title-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #e6e6e6;
  margin-right: 16px;
}
.acupuncture-title-action {
  display: flex;
  align-items: center;
  color: #16ada4;
  cursor: pointer;
  font-weight: 500;
}
.acupuncture-title-action-text {
  margin-left: 4px;
  font-size: 14px;
}
.tcm-header-row {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 48px;
  background: #fff;
  font-size: 15px;
  color: #666;
  gap: 24px;
}
.tcm-header-row span {
  display: flex;
  align-items: center;
}
.tcm-blue {
  color: #16ada4;
}
.tcm-bold {
  font-weight: 700;
}
.tcm-divider {
  border-bottom: 1px solid #f0f0f0;
  margin: 0 0 0 0;
}
.tcm-herb-list {
  display: flex;
  gap: 24px;flex-wrap: wrap;
  padding: 24px;
}
.tcm-herb-item {
  display: flex;
  align-items: center;
  border-radius: 8px;
  font-size: 16px;
  color: #222;
  min-width: 90px;
  border: 1px solid #e6e6e6;
}
.tcm-herb-item_1 {
  display: flex;
  align-items: center;
  background: #fafbfc;
  border-right: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 12px 12px;
  font-size: 16px;
  color: #222;
  min-width: 34px;
  justify-content: center;
}
.tcm-herb-item_2 {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px 8px;
  font-size: 16px;
  color: #222;
  justify-content: center;
}
.tcm-herb-item + .tcm-herb-item {
  margin-left: 16px;
}
.herb-name {
}
.herb-amount {
  margin-right: 4px;
}
</style>
